<template>
    <el-select v-model="modelValue">
        <el-option v-for="item in selectItem"
            :key="item.Id"
            :label="item.UserName"
            :value="item.Id"/>
    </el-select>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';
import userinfoapi from '../api/userinfoapi';

const modelValue = defineModel({default:Number})
const prop = defineProps({
    label:{
        type:String
    }
})
const emit = defineEmits(["update:label"])

const selectItem = ref<Array<any>>([])

watch(()=>modelValue.value,()=>{
    let userName = selectItem.value.find(o=>o.Id==modelValue.value).UserName

    emit("update:label",userName)
    console.log(prop.label);
    
})

userinfoapi.getAll().then((res:any)=>{
    selectItem.value = res.data
})
</script>

<style scoped>

</style>